<template>

  <div class="bg">
    <!-- <Loading v-show="LOADING"></Loading> -->

    <nav-com
      title="首页"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <van-pull-refresh
      v-model='isLoading'
      @refresh='onRefresh'
    >
      <!-- <div class="home_top">
        <img
          @click="zjHandler"
          src='../../assets/banner.gif'
        />
      </div> -->
      <!-- 轮播图 -->
      <!-- <div>
        <van-swipe
          class="my-swipe"
          :autoplay="3000"
          indicator-color="white"
        >
          <van-swipe-item
            v-for="(item, index) in bannerList"
            :key="index"
          >
          <img style="height:50vw;width:100vw" v-lazy="item.image"/>
          </van-swipe-item>
        </van-swipe>
      </div> -->
      <!-- 公告 -->
      <div style="background-color: #FAFAFA;display: flex;align-items: center;">
        <img
          src="@/assets/notice.png"
          style="width:31.5px;height:15px;padding:10px 15px;padding-right: 0px;"
        >
        <p style="border-right: 1px solid #EEEEEE;
          margin: 7px 5px;
          width: 1px;
          height: 15px;"></p>
        <div style="
          width: 30px;
          height: 25px;
          line-height: 25px;
          font-size: 10px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          margin-left: 0px;
          margin-right: 5px;
          text-align: center;
          background-color: #FF4B44;
          ">最新</div>
        <!-- <div style="font-size: 12px;flex: 1;font-weight: 500;">平台维护通知！</div> -->
        <van-notice-bar
          :scrollable="false"
        >
          <van-swipe
            vertical
            class="notice-swipe"
            :autoplay="3000"
            :show-indicators="false"
          >
            <van-swipe-item v-for="item in noticeList" :key="item.id">{{item.title}}</van-swipe-item>
          </van-swipe>
        </van-notice-bar>
        <img
          src="@/assets/m3.png"
          style="width: 2.5vw;height: 4.1vw;margin-right: 20px;"
        >
      </div>

      <!-- 公告 -->
      <!-- 金刚区 -->
      <div
        class="menus"
        @click="toNotice"
      >
        <div>
          <img
            src="../../assets/index/4.png"
            alt=""
          >
          <div>数码</div>
        </div>
        <div>
          <img
            src="../../assets/index/5.png"
            alt=""
          >
          <div>美妆</div>
        </div>
        <div>
          <img
            src="../../assets/index/6.png"
            alt=""
          >
          <div>母婴</div>
        </div>
        <div>
          <img
            src="../../assets/index/7.png"
            alt=""
          >
          <div>电器</div>
        </div>
        <div @click.stop="toshop">
          <img
            src="../../assets/index/8.png"
            alt=""
          >
          <div>鲜花</div>
        </div>
      </div>
      <!-- 导购图 -->
      <div>
        <div class="guide">
          <div class="guide-two">
            <div
              class="image"
              style="width: 44vw;margin-bottom:10px"
              @click="gohHandler(1)"
            >
              <img
                style="width: 100%; height: 100%;"
                src="@/assets/index/in1.png"
                alt=""
              >
            </div>
            <div
              class="image"
              style="width: 44vw;margin-bottom:10px"
              @click="gohHandler(3)"
            >
              <img
                style="width: 100%;    height: 100%;"
                src="@/assets/index/in2.png"
                alt=""
              >
            </div>
            <div
              class="image"
              style="width: 44vw;"
              @click="gohHandler(2)"
            >
              <img
                style="width: 100%;    height: 100%;"
                src="@/assets/index/in3.png"
                alt=""
              >
            </div>
            <div
              class="image"
              @click="gohHandler(4)"
              style="width: 44vw;"
            >
              <img
                style="width:100% ;height: 100%;"
                src="@/assets/index/in4.png"
                alt=""
              >
            </div>
          </div>
        </div>
      </div>
      <!-- 导购图 -->
      <div style="margin-left: 4vw; margin-right: 4vw;">商品</div>
      <ul class="list_box">

        <li
          v-for="(item,index) in list"
          :key="index"
        >
          <div @click="handerDetails(item.id)">
            <img
              class="box_img"
              :src='item.image'
            >
            <div class="box_title">
              <!-- <img src='../../assets/title.png'> -->
              <p>{{item.subtitle}}</p>
            </div>
            <div class="box_price">
              <span>￥</span>
              <p>{{item.price}}</p>
            </div>
          </div>
        </li>
      </ul>
    </van-pull-refresh>
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
    <van-popup v-model="show">
      <div class="popup">
        <div class="item1">省赚手机、赋能百业、创收政策</div>
        <div class="item2">领取平台权益包</div>
        <div class="item3">
          <div class="">
            <img
              src="../../assets/qybhg.png"
              style="width:11px;height:11px"
            />
            两大权益
          </div>
          <div class="">
            <img
              src="../../assets/qybsj.png"
              style="width:11px;height:11px"
            />
            升级权益
          </div>
          <div class="">
            <img
              src="../../assets/qybfx.png"
              style="width:11px;height:11px"
            />
            分销利润
          </div>
        </div>
        <div class="item4">自动分享利润</div>
        <div class="item5">享受更多的收益</div>

      </div>
      <div class="item6">立即领取</div>
      <div class="item7">
        <img
          src="../../assets/qybClose.png"
          style="width:25px;height:25px"
        />
      </div>
    </van-popup>
    <upgrade :showTip="showTip"></upgrade>
  </div>
</template>
<script>
import { getBagIdItem, getBagIdItem2, getBanner, getNoticeList, isDFOrder } from "@/api/api";
import navCom from "@/component/nav";
import Loading from "@/component/loading";
import { Popup, Toast, NoticeBar } from "vant";
import { Icon } from "vant";
import Upgrade from "@/component/upgrade.vue";

export default {
  name: "index",
  components: {
    navCom,
    Loading,
    Upgrade,
  },
  data() {
    return {
      list: [],
      isLoading:false,
      showView: false,
      LOADING: true,
      show: false,
      bannerList: [],
      showTip: false,
      noticeList:[],
      active:0
    };
  },
  mounted() {
    if (weixin.isAndroid()) {
      try {
        let version = window.JS_TROOPS.getAppVersionCode();
      } catch {
        this.showTip = true;
        console.log(this.showTip);
      }
    }
    // this.has_patForOther_order()
    this.init();
    this.noticeTitle()
  },
  methods: {
    // 是否有代付订单
    has_patForOther_order(){
      isDFOrder().then(res=>{
        if(res.data.code==1){
          this.$dialog.alert({
            title:'代付请求',
            message:`亲，您有一个来自${res.data.data.nickname}的代付订单，确认帮付款吗？`,
            cancelButtonText:'不看了',
            showCancelButton: true,
            confirmButtonText: '去看看'
          }).then(()=>{
            this.$router.push('/payForMe')
          }).catch(()=>{

          })
        }
      })
    },
    noticeTitle() {
      getNoticeList()
        .then((result) => {
          if (result.data.code == 1) {
            this.noticeList = result.data.data;
          }
        })
        .catch((err) => {});
    },
    toNotice() {
      this.$router.push("/noticeList");
    },
    gohHandler(val, typeNum) {
      if (val == 1) {
        // Toast("敬请期待");
        this.$router.push({ name: "everyMonth2", params: { one_day: 2 } });
      } else if (val == 2) {
        this.$router.push({ name: "everyMonth", params: { one_day: 1 } });
      } else if (val == 3) {
        Toast("敬请期待");
      } else if (val == 4) {
        this.$router.push({ name: "everyMonth4", params: { one_day: 0 } });
      }
    },
    onRefresh() {
      this.init();
      this.isLoading = false;
    },
    //初始化s
    init() {
      this.LOADING = true;
      getBagIdItem2({ page: "1", per_page: 50, keywords: "", one_day: 0 }).then(
        (res) => {
          this.list = res.data.data.data;
          this.LOADING = false;
        }
      );
      getBanner().then((res) => {
        console.log(67, res);
        this.bannerList = res.data.data;
      });

      //           ?page=3&per_page=1&keywords=
    },
    //返回
    backHandler() {
      this.$router.go(-1);
    },
    //跳转详情
    handerDetails(id) {
      this.$router.push({ name: "odersDetails", params: { id: id } });
    },
    zjHandler() {
      // this.$router.push('/zjdetails')
    },
    toshop(){
      this.$router.push('/vipIntro')
    },
    onChange(index){
      if(index == 1 ){
        this.$router.push('/my')
      }
    }
  },
};
</script>
<style scoped>
.notice-swipe {
    height: 40px;
    line-height: 40px;
    width: 70vw;
    overflow: hidden;
    white-space: nowrap;
  }
.van-dialog__message::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
.guide {
  padding: 2vw 4vw;
  /* display: flex;
  justify-content: space-between; */
  /* height: 50vw; */
}
.guide .guide-two {
  /* margin-left: 2vw;
  height: 24vw; */
  display: flex;
  /* flex-direction: column; */
  justify-content: space-between;
  /* margin-right: 3vw; */
  flex-wrap: wrap;
  flex: 50%;
}
.guide .guide-two div {
  /* height: 24vw;
  margin-bottom: 2vw; */
}
.menus {
  text-align: center;
  display: flex;
  justify-content: space-around;
  background: #fff;
  padding: 3vw 0;
  font-size: 14px;
}
.menus div img {
  height: 10vw;
}
p {
  margin: 0;
  padding: 0;
}
.bg {
  /* background: #f1f3f6; */
  min-height: 100vh;
}
.home_top {
  margin: 0vw 4vw;
}
.home_top img {
  width: 92vw;
}
.list_box {
  margin-left: 4vw;
  margin-right: 4vw;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
}
.list_box li {
  background: #fff;
  border-radius: 3vw;
  width: 44vw;
  margin-top: 4vw;
}
.list_box li .box_img {
  width: 44vw;
  border-top-left-radius: 3vw;
  border-top-right-radius: 3vw;
}
.list_box .box_title {
  font-size: 3.4vw;
  margin-top: 2vw;
}
.list_box .box_title img {
  width: 12vw;
  margin-left: 2.6vw;
  margin-right: 2vw;
  float: left;
}
.list_box .box_price {
  margin-top: 1.3vw;
  margin-bottom: 2.6vw;
}
.list_box .box_price span {
  font-size: 3.2vw;
  margin-top: 1.3vw;
  margin-left: 2.6vw;
  color: #d0021b;
  float: left;
  display: block;
}
.list_box .box_price p {
  font-size: 4.8vw;
  color: #d0021b;
}
.van-popup {
  background-color: transparent !important;
}
.popup {
  width: 252px;
  height: 194px;
  background-image: url(../../assets/equityBg.png);
  background-repeat: round;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popup .item1 {
  /* width: 336px; */
  height: 24px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-style: italic;
  color: #95613d;
  line-height: 42px;
}
.popup .item2 {
  height: 42px;
  font-size: 21px;
  font-family: Source Han Sans CN;
  font-weight: 800;
  color: #8d562f;
  line-height: 50px;
  text-shadow: 0px 5px 3px rgba(193, 133, 68, 0.29);
}
.popup .item3 {
  height: 21px;
  font-size: 10px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #97480f;
  line-height: 35px;
  display: flex;
  align-items: center;
}
.popup .item3 img {
  margin-left: 5px;
}
.popup .item4 {
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  /* line-height: 44px; */
  margin-top: 35px;
  background: linear-gradient(
    0deg,
    rgba(249, 236, 135, 0.76) 0%,
    rgba(238, 174, 91, 0.76) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.popup .item5 {
  height: 19px;
  font-size: 5px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 24px;
  opacity: 0.27;
  transform: scale(0.8);
}
.item6 {
  width: 175px;
  background: linear-gradient(90deg, #ffecd4 0%, #dfab7c 100%);
  box-shadow: 0px 4px 0px 0px rgba(193, 133, 68, 0.36);
  border-radius: 36px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #84460e;
  line-height: 45px;
  position: relative;
  text-align: center;
  margin: 0 auto;
  margin-top: -22.5px;
}
.item7 {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
</style>
